<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
// 每个组件必须加
@Component
export default class DdTable extends Vue {
  columnHeight: string = "auto";
  // 组件的数据
  @Prop({
    type: Array,
    default() {
      return [];
    }
  })
  data!: any;

  // 当数据为空时，表格高度
  @Prop({
    type: String,
    default() {
      return "600px";
    }
  })
  height!: string;

  // table 配置项
  @Prop({
    type: Array,
    default() {
      return [];
    }
  })
  config!: any;

  // 空文本提示
  @Prop({
    type: String,
    default() {
      return "暂无数据";
    }
  })
  emptyText!: string;

  // 表格边框
  @Prop({
    type: Boolean,
    default() {
      return false;
    }
  })
  border!: boolean;

  @Prop({
    type: Object,
    default() {
      return { background: "rgba(242, 243, 248, 0.9)", color: "#000" };
    }
  })
  headerCellStyle!: any;

  // 显示分页
  @Prop({
    type: Boolean,
    default() {
      return true;
    }
  })
  isShowPage!: boolean;

  // 当前页码
  @Prop({
    type: Number,
    default() {
      return 1;
    }
  })
  currentPage!: number;

  // 页码条数大小
  @Prop({
    type: Array,
    default() {
      return [20, 40, 80, 100];
    }
  })
  pageSizes!: any;

  // 当前页码数
  @Prop({
    type: Number,
    default() {
      return 20;
    }
  })
  pageSize!: number;

  // 数据总数
  @Prop({
    type: Number,
    default() {
      return 0;
    }
  })
  total!: number;

  // 分页背景
  @Prop({
    type: Boolean,
    default() {
      return true;
    }
  })
  background!: boolean;

  // 加载中...
  @Prop({
    type: Boolean,
    default() {
      return false;
    }
  })
  loading!: boolean;

  // 页面layout
  @Prop({
    type: String,
    default() {
      return "total, sizes, prev, pager, next, jumper";
    }
  })
  pageLayout!: string;

  // 默认展开全部属性
  @Prop({
    type: Boolean,
    default() {
      return false;
    }
  })
  defaultExpandAll!: boolean;

  // 是否有斑马纹
  @Prop({
    type: Boolean,
    default() {
      return true;
    }
  })
  stripe!: boolean;

  // 合并行列
  @Prop({
    type: Function,
    default: function() {
    }
  })
  spanMethod!: Function;

  // 改变页面显示的数量
  handleSizeChange(val) {
    this.$emit("size-change", val);
  }
  // 改变页码
  handleCurrentChange(val) {
    this.$emit("current-change", val);
  }
  // 上一页
  prevClick(page) {
    this.$emit("prec-click", page);
  }
  // 下一页
  nextClick(page) {
    this.$emit("next-click", page);
  }
  // 点击行事件
  rowClick(row, column, event) {
    this.$emit("row-click", row, column, event);
  }
  // 点击单元格事件
  cellClick(row, column, event) {
    this.$emit("cell-click", row, column, event);
  }
  // 勾选
  handleSelectionChange(data) {
    this.$emit("handle-selection-change", data);
  }
  // 排序事件
  sortChange(column) {
    this.$emit("sort-change", column);
  }
  // 过滤事件
  fliterChange(filters) {
    this.$emit("filter-change", filters);
  }

  // 展开事件
  expandChange(expandedRows, expanded) {
    this.$emit("expand-change", expandedRows, expanded);
  }

  created() {
    this.columnHeight = this.height;
    if (this.data.length === 0) {
      this.columnHeight = this.height;
    } else {
      this.columnHeight = "auto";
    }
  }

  mounted() {
    document.documentElement.style.setProperty(
      "--filtersColor",
      this.headerCellStyle.color
    );
  }

  render(h) {
    const vm = this;
    let tableProp = {};
    if (vm.columnHeight === "auto") {
      tableProp = {
        data: vm.data,
        size: "mini",
        stripe: vm.stripe,
        headerCellStyle: vm.headerCellStyle,
        border: vm.border,
        elementLoadingText: "拼命加载中",
        elementLoadingSpinner: "el-icon-loading",
        elementLoadingBackground: "rgba(0, 0, 0, 0.8)",
        defaultExpandAll: vm.defaultExpandAll,
        "span-method": vm.spanMethod
      };
    } else {
      tableProp = {
        data: vm.data,
        size: "mini",
        stripe: vm.stripe,
        headerCellStyle: vm.headerCellStyle,
        height: vm.columnHeight,
        emptyText: vm.emptyText,
        border: vm.border,
        defaultExpandAll: vm.defaultExpandAll,
        "element-loading-text": "拼命加载中",
        "element-loading-spinner": "el-icon-loading",
        "element-loading-background": "rgba(0, 0, 0, 0.8)",
        "span-method": vm.spanMethod
      };
    }

    return h(
      "div",
      {
        class: "ddtable",
        attr: {
          class: "ddtable"
        }
      },
      [
        h(
          "el-table",
          {
            props: tableProp,
            // 这里得是短杠 'row-click'， 驼峰不好使
            on: {
              "row-click": vm.rowClick,
              "cell-click": vm.cellClick,
              select: vm.handleSelectionChange,
              "selection-change": vm.handleSelectionChange,
              "sort-change": vm.sortChange,
              "filter-change": vm.fliterChange,
              "expand-change": vm.expandChange
            },
            directives: [
              //自定义指令
              {
                name: "loading",
                value: vm.loading
              }
            ]
          },
          [
            ...(vm.renderTableColumns(h) || []),
            ...(vm.$slots.prepend || []),
            ...(vm.$slots.append || []),
            ...(vm.$slots.prefix || []),
            ...(vm.$slots.suffix || []),
            this.$slots.default
          ]
        ),
        vm.isShowPage
          ? h(
              "div",
              {
                style: {
                  width: "100%",
                  "text-align": "center",
                  "margin-top": "5px"
                }
              },
              [
                h("el-pagination", {
                  props: {
                    "current-page": vm.currentPage,
                    "page-sizes": vm.pageSizes,
                    "page-size": vm.pageSize,
                    total: vm.total,
                    background: vm.background,
                    layout: vm.pageLayout // "total, sizes, prev, pager, next, jumper" // pageLayout
                  },
                  on: {
                    "size-change": vm.handleSizeChange,
                    "current-change": vm.handleCurrentChange,
                    "prev-click": vm.prevClick,
                    "next-click": vm.nextClick
                  }
                })
              ]
            )
          : ""
      ]
    );
  }

  renderTableColumns(h) {
    const vm = this;
    return vm.config.map(item => {
      return vm.renderTableColumn(h, item);
    });
  }

  renderTableColumn(h, detail: any = {}) {
    const vm = this;
    return h(
      "el-table-column",
      {
        props: {
          ...detail
        }
      },
      [...(vm.$slots.prepend || []), ...(vm.$slots.append || [])]
    );
  }
}
</script>

<style>
@import "./index.css";
</style>
